<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"><head>
        <title>Dialog 2.0</title>
        <meta http-equiv="Content-type" content="text/xhtml; charset=UTF-8;" />
        <link href="dialog.2.0.css" rel="stylesheet" type="text/css" />
        <link href="index.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" language="javascript" src="../../js/prototype.js"></script>
        <script type="text/javascript" language="javascript" src="dialog.2.0.js"></script>

    </head><body>

        <a id="top"></a>
        <h1>Dialog, <em>show things nicely</em></h1>
        <div id="container">
            <div style="margin:1em;background:red;color:white;font-weight:bold;padding:1em;">
                Version 2.0 is the latest version I was able to restore after local drive and server crash. People who own 2.1 really should e-mail me. 
                I don't update this script anymore so here's a link to the unobfuscated source of 2.0:<br /><br />
                <a href="_dev.2.0.js">Script source</a>
            </div>

            <div id="left">
                <h2>v.2.0 by Roland Franssen</h2>
                <ul>
                    <li><a href="http://www.prototypejs.org">PrototypeJS Framework</a></li>
                    <li><a href="http://roland.devarea.nl/comments.php?t=dialog">Comment this script</a></li>
                </ul>
                <h2>Demo's &amp; Example codes</h2>

                <ul>
                    <li><a href="#e0">Predefined Dialogs</a></li>
                    <li><a href="#e1">Event handlers</a></li>
                    <li><a href="#e2">Dimensions</a></li>
                    <li><a href="#e3">Contents</a></li>
                    <li><a href="#e4">Targets</a></li>

                    <li><a href="#e5">AJAX</a></li>
                    <li><a href="#e6">Iframe</a></li>
                    <li><a href="#e7">Closing</a></li>
                    <li><a href="#e8">Callbacks</a></li>
                    <li><a href="#e9">Misc.</a></li>
                </ul>

            </div>
            <div id="right">
                <h2>Browser support</h2>
                <ul>
                    <li>Firefox 2.0.0.13</li>
                    <li>Internet Explorer 6, 7</li>
                    <li>Safari 3.1</li>

                </ul>
                <h2>Changelog (Latest April 6, 2008)</h2>
                <ul>
                    <li>2.0 - public release</li>
                </ul>
                <h2>Files</h2>
                <ul>

                    <li><a href="dialog.2.0.js">dialog.2.0.js</a> (8.96 kB)</li>
                    <li><a href="dialog.2.0.css">dialog.2.0.css</a></li>
                    <li><a href="hot.jpg">hot.jpg</a> :-)</li>
                </ul>
            </div>

            <br style="clear:both;" />
            <div id="banner">
                <script type="text/javascript"><!--
                    google_ad_client = "pub-3032056024872894";
                    google_ad_slot = "2144856851";
                    google_ad_width = 468;
                    google_ad_height = 60;
                    //-->
                </script>
                <script type="text/javascript"
                        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
            </div>
            <table>
                <colgroup>
                    <col width="100" />

                    <col width="350" />
                    <col width="350" />
                </colgroup>
                <tr class="first">
                    <th>Handle</th>
                    <th>Description</th>
                    <th>Code</th>

                </tr>
                <tr>
                    <th colspan="3" id="e0">Predefined Dialogs <a href="#top">^</a></th>
                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_alert">Alert me!</a></td>
                    <td>Dialogs default static alert function.</td>

                    <td>
                        <pre>$('dialog_alert').observe('click', function(){
	Dialogs.alert('Some alert message');
});</pre></td>
                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_confirm">Confirm me!</a></td>
                    <td>Dialogs default static confirm function.</td>
                    <td>
                        <pre>$('dialog_confirm').observe('click', function(){
	Dialogs.confirm(
		'Some confirm message',
		function(){
			alert('Clicked yes!');
		},
		function(){
			alert('Clicked no!');
		}
	);
});</pre></td>

                </tr>
                <tr>
                    <th colspan="3" id="e1">Event handlers <a href="#top">^</a></th>
                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_1">Dialog #1</a></td>
                    <td>Default dialog with a classname attached to the content block.</td>

                    <td>
                        <pre>/*
#dialog-container .myFirstDialog { color:orange;font-size:20px }
&lt;a href=&quot;javascript:;&quot; id=&quot;dialog_1&quot;&gt;Dialog #1&lt;/a&gt;
*/
new Dialog({
	handle:'#dialog_1',
	title:'Dialog #1',
	content:'Some content (#1)',
	className:'myFirstDialog'
});</pre></td>
                </tr>
                <tr>

                    <td><a href="javascript:;" class="dialog_2">Dialog #2a</a>, <a href="javascript:;" class="dialog_2">Dialog #2b</a></td>
                    <td>Multiple event handlers for the same dialog.</td>
                    <td>
                        <pre>/*
&lt;a href=&quot;javascript:;&quot; class=&quot;dialog_2&quot;&gt;Dialog #2a&lt;/a&gt;, 

&lt;a href=&quot;javascript:;&quot; class=&quot;dialog_2&quot;&gt;Dialog #2b&lt;/a&gt;
*/
new Dialog({
	handle:'a.dialog_2',
	title:'Dialog #2',
	content:'Some content (#2)'
});</pre></td>
                </tr>
                <tr>
                    <th colspan="3" id="e2">Dimensions <a href="#top">^</a></th>

                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_3">Dialog #3</a></td>
                    <td>Fixed width/height dimensions.</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_3',
	title:'Dialog #3',
	content:'Some content (#3)',
	width:300,
	height:600
});</pre></td>
                </tr>
                <tr>

                    <td><a href="javascript:;" id="dialog_4">Dialog #4</a></td>
                    <td>Maximum width/height dimensions, including padding &amp; margin offsets.</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_4',
	title:'Dialog #4',
	content:'Some content (#4)',
	width:'max',
	height:'max',
	padding:25,
	margin:50
});</pre></td>
                </tr>
                <tr>
                    <th colspan="3" id="e3">Contents <a href="#top">^</a></th>

                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_5">Dialog #5</a></td>
                    <td>Single DOM object as content.</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_5',
	title:'Dialog #5',
	content:new Element('span', {style:'color:red'}).update('DOM Element')
});</pre></td>
                </tr>
                <tr>

                    <td><a href="javascript:;" id="dialog_6">Dialog #6</a></td>
                    <td>Multiple DOM objects and/or HTML strings as content.</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_6',
	title:'Dialog #6',
	content:[
		'&lt;strong&gt;Bold&lt;/strong&gt; ',
		new Element('span', {style:'color:green'}).update('Green '),
		'&lt;em&gt;Italic&lt;/em&gt;'
	]
});</pre></td>

                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_7">Dialog #7</a></td>
                    <td>Extended content.</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_7',
	title:'Dialog #7',
	content:function(){
		var element = new Element('a', {href:'javascript:;'});
		element.update('Click me!').observe('click', function(){
			alert('Hi there...');
		});
		return element;
	}
});</pre></td>
                </tr>
                <tr>

                    <td><a href="javascript:;" id="dialog_8">Dialog #8</a></td>
                    <td>Use dialog in steps or as gallery. (Bonus: Use your left/right keyboard arrows to navigate.)</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_8',
	title:'Dialog #8',
	content:$H({
		'Step 1':'Content for step 1',
		'Step 2':new Element('img', {src:'http://roland.devarea.nl/dialog/2.0/hot.jpg'}),
		'Step 3':'Content for step 3'
	})
});</pre></td>
                </tr>
                <tr>
                    <th colspan="3" id="e4">Targets <a href="#top">^</a></th>

                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_9">Dialog #9</a><div id="dialog_9_target">Im a div element with ID #dialog_9_target</div></td>
                    <td>Fetch source content for dialog. (Auto open this dialog, click <a href="#dialog_9_target">here</a>, and hit F5.)</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_9',
	title:'Dialog #9',
	target:{
		id:'dialog_9_target',
		auto:true
	}
});</pre></td>

                </tr>
                <tr>
                    <th colspan="3" id="e5">AJAX <a href="#top">^</a></th>
                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_10">Dialog #10</a></td>
                    <td>Simple PHP file loaded by AJAX (<a href="ajax.text.phps">ajax.text.php</a>).</td>

                    <td>
                        <pre>new Dialog({
	handle:'#dialog_10',
	title:'Dialog #10',
	ajax:{
		url:'ajax.text.php',
		options:{
			parameters:{
				'key':'value'
			},
			onComplete:function(t){
				alert('Im done!');
			}
		}
	}
});</pre></td>
                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_11">Dialog #11</a></td>
                    <td>JSON string generated by PHP loaded with AJAX and parsed into a <a href="http://www.prototypejs.org/api/string/interpolate">template</a> (<a href="ajax.json.phps">ajax.json.php</a>, be patient; PHP lets it sleep for a few seconds).</td>

                    <td>
                        <pre>new Dialog({
	handle:'#dialog_11',
	title:'Dialog #11',
	ajax:{
		url:'ajax.json.php',
		jsonTemplate:'&lt;strong&gt;#{item_1}&lt;/strong&gt;&lt;br /&gt;&lt;em&gt;#{item_2}&lt;/em&gt;&lt;br /&gt;&lt;u&gt;#{item_3}&lt;/u&gt;'
	}
});</pre></td>
                </tr>

                <tr>
                    <th colspan="3" id="e6">Iframe <a href="#top">^</a></th>
                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_12">Dialog #12</a></td>
                    <td>Google.com loaded in an iframe as content for Dialog.</td>
                    <td>

                        <pre>new Dialog({
	handle:'#dialog_12',
	title:'Dialog #12 (Google.com)',
	width:'max',
	height:'max',
	padding:0,
	margin:75,
	iframe:'http://www.google.com'
});</pre></td>
                </tr>
                <tr>
                    <th colspan="3" id="e7">Closing <a href="#top">^</a></th>
                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_13">Dialog #13</a></td>

                    <td>Disable close link and closing by clicking the overlay.</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_13',
	title:'Dialog #13',
	content:'Close by pushing the ESC button',
	close:{
		link:false,
		overlay:false,
		esc:true
	}
});</pre></td>
                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_14">Dialog #14</a></td>
                    <td>Close by using Dialogs static function. (Note: because no title is given and closing link is disabled the top-header is completely hidden.)</td>

                    <td>
                        <pre>new Dialog({
	handle:'#dialog_14',
	content:'I can only be closed by clicking &lt;a href=&quot;javascript:Dialogs.close();&quot;&gt;here&lt;/a&gt;.',
	close:{
		link:false,
		overlay:false,
		esc:false
	}
});</pre></td>
                </tr>
                <tr>
                    <th colspan="3" id="e8">Callbacks <a href="#top">^</a></th>

                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_15">Dialog #15</a></td>
                    <td>All available callback functions.</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_15',
	title:'Dialog #15',
	content:'Some content (#15)',
	afterClick:function(event){
		alert('Handler: ' + event.element().identify());
	},
	afterOpen:function(){
		alert('Im open');
	},
	afterClose:function(){
		alert('Im closed');
	}
});</pre></td>
                </tr>
                <tr>

                    <th colspan="3" id="e9">Misc. <a href="#top">^</a></th>
                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_16">Dialog #16</a></td>
                    <td>Disable inner scrolling.</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_16',
	title:'Dialog #16',
	content:'Some long content and fixed width/height to enable scrollbars, but we disabled them by default.',
	width:150,
	height:50,
	innerScroll:false
});</pre></td>

                </tr>
                <tr>
                    <td><a href="javascript:;" id="dialog_17">Dialog #17</a></td>
                    <td>Change the basic colors and overlay opacity.</td>
                    <td>
                        <pre>new Dialog({
	handle:'#dialog_17',
	title:'Dialog #17',
	content:'Some content (#17)',
	opacity:.5,
	width:600,
	height:500,
	background:['#f30', 'url(hot.jpg) no-repeat 50% 50%']
});</pre></td>
                </tr>
                <tr>

                    <td><a href="javascript:;" id="dialog_18">Dialog #18</a><br /><input type="checkbox" id="dialog_18_activate" /> Activate</td>
                    <td>Dialogs open/close class methods for more complex code. (Note: don't assign the handle option.)</td>
                    <td>
                        <pre>var modal = new Dialog({
	title:'Dialog #18',
	content:'Some content (#18)'
});
$('dialog_18').observe('click', function(){
	if($F('dialog_18_activate') == 'on')
		modal.open();
});</pre></td>
                </tr>
            </table>
        </div>

        <script type="text/javascript" language="javascript">
            $('dialog_alert').observe('click', function(){
                Dialogs.alert('Some alert message');
            });
            $('dialog_confirm').observe('click', function(){
                Dialogs.confirm(
                'Some confirm message',
                function(){
                    alert('Clicked yes!');
                },
                function(){
                    alert('Clicked no!');
                }
            );
            });
            new Dialog({
                handle:'#dialog_1',
                title:'Dialog #1',
                content:'Some content (#1)',
                className:'myFirstDialog'
            });
            new Dialog({
                handle:'a.dialog_2',
                title:'Dialog #2',
                content:'Some content (#2)'
            });
            new Dialog({
                handle:'#dialog_3',
                title:'Dialog #3',
                content:'Some content (#3)',
                width:300,
                height:600
            });
            new Dialog({
                handle:'#dialog_4',
                title:'Dialog #4',
                content:'Some content (#4)',
                width:'max',
                height:'max',
                padding:25,
                margin:50
            });
            new Dialog({
                handle:'#dialog_5',
                title:'Dialog #5',
                content:new Element('span', {style:'color:red'}).update('DOM Element')
            });
            new Dialog({
                handle:'#dialog_6',
                title:'Dialog #6',
                content:[
                    '<strong>Bold</strong> ',
                    new Element('span', {style:'color:green'}).update('Green '),
                    '<em>Italic</em>'
                ]
            });
            new Dialog({
                handle:'#dialog_7',
                title:'Dialog #7',
                content:function(){
                    var element = new Element('a', {href:'javascript:;'});
                    element.update('Click me!').observe('click', function(){
                        alert('Hi there...');
                    });
                    return element;
                }
            });
            new Dialog({
                handle:'#dialog_8',
                title:'Dialog #8',
                content:$H({
                    'Step 1':'Content for step 1',
                    'Step 2':new Element('img', {src:'http://roland.devarea.nl/dialog/2.0/hot.jpg'}),
                    'Step 3':'Content for step 3'
                })
            });
            new Dialog({
                handle:'#dialog_9',
                title:'Dialog #9',
                target:{
                    id:'dialog_9_target',
                    auto:true
                }
            });
            new Dialog({
                handle:'#dialog_10',
                title:'Dialog #10',
                ajax:{
                    url:'ajax.text.php',
                    options:{
                        parameters:{
                            'key':'value'
                        },
                        onComplete:function(t){
                            alert('Im done!');
                        }
                    }
                }
            });
            new Dialog({
                handle:'#dialog_11',
                title:'Dialog #11',
                ajax:{
                    url:'ajax.json.php',
                    jsonTemplate:'<strong>#{item_1}</strong><br /><em>#{item_2}</em><br /><u>#{item_3}</u>'
                }
            });
            new Dialog({
                handle:'#dialog_12',
                title:'Dialog #12 (Google.com)',
                width:'max',
                height:'max',
                padding:0,
                margin:75,
                iframe:'http://www.google.com'
            });
            new Dialog({
                handle:'#dialog_13',
                title:'Dialog #13',
                content:'Close by pushing the ESC button',
                close:{
                    link:false,
                    overlay:false,
                    esc:true
                }
            });
            new Dialog({
                handle:'#dialog_14',
                content:'I can only be closed by clicking <a href="javascript:Dialogs.close();">here</a>.',
                close:{
                    link:false,
                    overlay:false,
                    esc:false
                }
            });
            new Dialog({
                handle:'#dialog_15',
                title:'Dialog #15',
                content:'Some content (#15)',
                afterClick:function(event){
                    alert('Handler: ' + event.element().identify());
                },
                afterOpen:function(){
                    alert('Im open');
                },
                afterClose:function(){
                    alert('Im closed');
                }
            });
            new Dialog({
                handle:'#dialog_16',
                title:'Dialog #16',
                content:'Some long content and fixed width/height to enable scrollbars, but we disabled them by default.',
                width:150,
                height:50,
                innerScroll:false
            });
            new Dialog({
                handle:'#dialog_17',
                title:'Dialog #17',
                content:'Some content (#17)',
                opacity:.5,
                width:600,
                height:500,
                background:['#f30', 'url(hot.jpg) no-repeat 50% 50%']
            });
            var modal = new Dialog({
                title:'Dialog #18',
                content:'Some content (#18)'
            });
            $('dialog_18').observe('click', function(){
                if($F('dialog_18_activate') == 'on')
                    modal.open();
            });
        </script>
        <div class="js-kit-rating" id="rate" />
        <script type="text/javascript" language="javascript" src="http://js-kit.com/ratings.js"></script>
    </body></html>